﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >

<head>
    <title>Variable Product - Premium Multipurpose HTML5/CSS3 Theme</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <!-- FAVICONS -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{/icons/apple-touch-icon-144-precomposed.png}" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" th:href="@{/icons/apple-touch-icon-114-precomposed.png}" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{/icons/apple-touch-icon-72-precomposed.png}" />
    <link rel="apple-touch-icon-precomposed" th:href="@{/icons/apple-touch-icon-57-precomposed.png}" />
    <link rel="shortcut icon" th:href="@{/icons/favicon.png}" />

    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" th:href="@{/css/slick-1.6.0/slick.css}" />

    <link rel="stylesheet" th:href="@{/css/jquery.fancybox.css}" />
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-compare/colorbox.css}" />
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.carousel.min.css}" />
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.theme.default.min.css}" />
    <link rel="stylesheet" th:href="@{/css/js_composer/js_composer.min.css}" />
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce.css}" />
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-layout.css}" />
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-smallscreen.css}" />
    <link rel="stylesheet" th:href="@{/css/prettyphoto/prettyPhoto.css}" />
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-wishlist/style.css}" />
    <link rel="stylesheet" th:href="@{/css/layui.css}">

    <link rel="stylesheet" th:href="@{/css/custom.css}" />
    <link rel="stylesheet" th:href="@{/css/app-orange.css}" id="theme_color" />
    <link rel="stylesheet" href="" id="rtl" />
    <link rel="stylesheet" th:href="@{/css/app-responsive.css}" />

    <style>
        .keleyitable {
            width: 800px;
        }

        .keleyitable table, td, th {
            border: 1px solid black;margin-top:10px;
        }
        .klytd {width:100px;text-align:right
        }
        .hvttd {
            width:500px}
    </style>
</head>

<body class="product-template-default single single-product woocommerce woocommerce-page">
<div class="body-wrapper theme-clearfix">
    <header id="header" class="header header-style1">

        <div th:replace="commons/bar::#top"></div>

        <div th:replace="commons/bar::#mid"></div>

        <div th:replace="commons/bar::#bottom(url='home')"></div>

    </header>

    <div class="listings-title">
        <div class="container">
            <div class="wrap-title">
                <h1>[[${detail.pname}]]</h1>
                <div class="bread">
                    <div class="breadcrumbs theme-clearfix">
                        <div class="container">
                            <ul class="breadcrumb">
                                <li><a th:href="@{/index}" th:text="#{home}"></a><span class="go-page"></span></li>

                                <li class="active" th:text="${detail.pname}"><span></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="contents-detail" class="content col-lg-12 col-md-12 col-sm-12" role="main">
                <div id="container">
                    <div id="content" role="main">
                        <div class="single-product clearfix">
                            <div id="product-01" class="post-01 product type-product status-publish has-post-thumbnail product_cat-batteries-chargers product_cat-cameras-camcorders product_cat-mp3-player-accessories product_cat-television-cameras-accessories first instock shipping-taxable purchasable product-type-variable has-default-attributes has-children">
                                <div class="product_detail row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 clear_xs">
                                        <div class="slider_img_productd">
                                            <!-- woocommerce_show_product_images -->
                                            <div id="product_img_01" class="product-images loading" data-rtl="false">
                                                <div class="product-images-container clearfix thumbnail-bottom">
                                                    <img height="300px" width="300px" th:src="@{${detail.pimage}}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 clear_xs">
                                        <div class="content_product_detail">
                                            <h1 itemprop="name" class="product_title entry-title">[[${detail.pname}]]</h1>

                                            <div class="reviews-content">
                                                <div class="star">
                                                    <span th:style="'width:'+${detail.star}+'px'"></span>
                                                </div>
                                                <a href="#reviews" class="woocommerce-review-link" rel="nofollow"><span class="count" th:text="${detail.reviews}"></span> Review(s)</a>
                                            </div>

                                            <div>

                                                <p class="price">


                                                    <del th:if="${detail.deals!=0}" th:text="'￥'+${detail.marketPrice}">
                                                    </del>

                                                    <ins th:text="'￥'+${detail.shopPrice}">
                                                    </ins>

                                                </p>
                                            </div>

                                            <div class="product-info clearfix">
                                                <div class="product-stock pull-left in-stock">
                                                    <span>in stock <strong th:text="${detail.stock}"></strong> </span>
                                                </div>
                                                <span class="sku_wrapper pull-left">product code  :  sku - <span class="sku" itemprop="sku" th:text="${detail.pid}"></span></span>

                                            </div>
                                            <div class="product-info clearfix">
                                                <span class="sku_wrapper pull-left">颜色: &nbsp;&nbsp;[[${detail.color}]] &nbsp;&nbsp;</span>
                                                <span class="sku"> 规格：&nbsp;&nbsp;[[${detail.size}]] </span>
                                            </div>
                                            <div class="description" itemprop="description">
                                                <p th:utext="${detail.description}"></p>
                                            </div>
                                            <!--加入购物车-->
                                            <form class="variations_form cart" method="post" th:action="@{/add}" >
                                                <input type="hidden" th:name="pid" th:value="${detail.pid}"/>



                                                <div class="addcart-wrapper clearfix">
                                                    <div class="single_variation_wrap">
                                                        <div class="woocommerce-variation single_variation">
                                                            <input th:name="count" type="number" class="col-xs-3 form-control"  id="count" min="0">
                                                        </div>
                                                        <div class="woocommerce-variation-add-to-cart variations_button">

                                                            <button type="submit" class="btn btn-primary" th:text="#{addtocart}">加入购物车</button>
                                                        </div>

                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tabs clearfix">
                                <div class="tabbable">
                                    <ul class="nav nav-tabs">
                                        <li class="description_tab active">
                                            <a href="#tab-description" data-toggle="tab"><span th:text="#{productDescription}"> Description</span></a>
                                        </li>

                                        <li class="additional_information_tab ">
                                            <a href="#tab-additional_information" data-toggle="tab"><span th:text="#{addtionalinfo}"></span></a>
                                        </li>

                                        <li class="reviews_tab ">
                                            <a href="#tab-reviews" data-toggle="tab"><span th:text="#{reviews}"></span> </a>
                                        </li>
                                    </ul>

                                    <div class="clear"></div>

                                    <div class=" tab-content">
                                        <div class="tab-pane active" id="tab-description">
                                            <h2><span th:text="#{productDescription}"></span></h2>
                                            <p th:utext="${detail.description}"></p>
                                        </div>

                                        <div class="tab-pane " id="tab-additional_information">
                                            <h2><span th:text="#{addtionalinfo}"></span> </h2>
                                            <div class="shop_attributes">
                                                <div th:utext="${detail.details}"></div>
                                            </div>
                                        </div>

                                        <div class="tab-pane" id="tab-reviews">
                                            <div id="reviews">
                                                <div id="comments">
                                                    <h2><span th:text="#{reviews}"></span> </h2>
                                                    <p class="woocommerce-noreviews" th:if="${session.comments==null}">还没有任何评论</p>
                                                    <div class="woocommerce-noreviews" th:if="${session.comments!=null}" th:each="item:${session.comments}">

                                                        <!--
                                                    <div th:text="${item.uname}+' 评论 :'+${item.content} +'时间:'+${#dates.format(item.cdate,'yyyy-MM-dd')}" font-size="30px"></div>
                                                        <hr class="layui-bg-red">
                                                    </div>
                                                    -->
                                                        <div>
                                                            <table>
                                                                <tr><td class="klytd">评论时间：</td><td class="hvttd" th:text="${#dates.format(item.cdate,'yyyy-MM-dd')}"></td></tr>
                                                                <tr><td class="klytd">评论用户：</td><td class="hvttd" th:text="${item.uname}"></td></tr>
                                                                <tr><td class="klytd">评论星级：</td><td class="hvttd " >
                                                                    <div class="star">
                                                                        <span th:style="'width:'+${item.star*15}+'px'"></span>
                                                                    </div>
                                                                </td></tr>
                                                                <tr><td class="klytd">评论用户：</td><td class="hvttd" th:text="${item.content}" font-size="30px"></td></tr>
                                                            </table>
                                                        </div>
                                                        <hr class="layui-bg">
                                                    </div>
                                                </div>
                                                <!--评论表-->
                                                <div id="review_form_wrapper">
                                                    <div id="review_form">
                                                        <div id="respond" class="comment-respond">
                                                            <h3 id="reply-title" class="comment-reply-title" th:if="${session.comments==null}">Be the first to review "Variable Product"
                                                                <small><a rel="nofollow" id="cancel-comment-reply-link" href="" style="display:none;">Cancel reply</a></small>
                                                            </h3>

                                                            <form th:action="@{/comment}" method="post" class="comment-form">
                                                                <p class="comment-form-rating">
                                                                    <label for="rating" th:text="#{youRating}"></label>
                                                                    <select name="star" id="rating" required="required">
                                                                        <option value="">Rate ...</option>
                                                                        <option value="5">Perfect</option>
                                                                        <option value="4">Good</option>
                                                                        <option value="3">Average</option>
                                                                        <option value="2">Not that bad</option>
                                                                        <option value="1">Very Poor</option>
                                                                    </select>
                                                                </p>

                                                                <p class="comment-form-comment">
                                                                    <label for="comment_content" th:text="#{yourrevies}"></label>
                                                                    <input type="hidden" id = "product_id" name="pid" th:value="${detail.pid}">
                                                                    <textarea class="form-control comment" id="comment_content"  rows="8" name="content"></textarea>
                                                                    <button type="submit" class="btn btn-success btn-comment" data-th-attr="onclick='comment(\''+${detail.pid}+'\')'"> 发送 </button>
                                                                </p>
                                                            </form>
                                                        </div>
                                                        <!-- #respond -->
                                                    </div>
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bottom-single-product theme-clearfix">
                                <div class="widget-1 widget-first widget sw_related_upsell_widget-2 sw_related_upsell_widget" data-scroll-reveal="enter bottom move 20px wait 0.2s">
                                    <div class="widget-inner"></div>
                                </div>

                                <div class="widget-2 widget-last widget sw_related_upsell_widget-3 sw_related_upsell_widget" data-scroll-reveal="enter bottom move 20px wait 0.2s">
                                    <div class="widget-inner">
                                        <div id="sliderup_sw_related_upsell_widget-3" class="sw-woo-container-slider upsells-products responsive-slider clearfix loading" data-lg="4" data-md="3" data-sm="2" data-xs="2" data-mobile="1" data-speed="1000" data-scroll="1" data-interval="5000" data-autoplay="false">
                                            <div class="resp-slider-container">
                                                <div class="box-slider-title">
                                                    <h2><span>Upsell Products</span></h2>
                                                </div>

                                                <div class="slider responsive">
                                                    <!--将商品缩略图模块化-->
                                                    <div th:each="s:${similar}">
                                                        <div th:replace="commons/product::#frag(detail=${s})"></div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- DIALOGS -->

<div th:replace="commons/bar::#login_form"></div>

<a id="etrostore-totop" href="#"></a>

<script type="text/javascript" th:src="@{/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/jquery-migrate.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/js.cookie.min.js}"></script>

<!-- OPEN LIBS JS -->
<script type="text/javascript" th:src="@{/js/owl-carousel/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{/js/slick-1.6.0/slick.min.js}"></script>

<script type="text/javascript">
    /* <![CDATA[ */
    var woocommerce_price_slider_params = {"currency_symbol":"$","currency_pos":"left","min_price":"100","max_price":"500"};
    var wc_single_product_params = {"i18n_required_rating_text":"Please select a rating","review_rating_required":"yes"};
    /* ]]> */
</script>
<script type="application/javascript" th:src="@{/js/community.js}"></script>
<script type="text/javascript" th:src="@{/js/widget.min.js}"></script>
<script type="text/javascript" th:src="@{/js/mouse.min.js}"></script>
<script type="text/javascript" th:src="@{/js/slider.min.js}"></script>
<script type="text/javascript" th:src="@{/js/js_composer/js_composer_front.min.js}"></script>

<script type="text/javascript" th:src="@{/js/yith-woocommerce-compare/jquery.colorbox-min.js}"></script>
<script type="text/javascript" th:src="@{/js/isotope/isotope.js}"></script>
<script type="text/javascript" th:src="@{/js/fancybox/jquery.fancybox.pack.js}"></script>
<script type="text/javascript" th:src="@{/js/sw_woocommerce/category-ajax.js}"></script>
<script type="text/javascript" th:src="@{/js/sw_woocommerce/jquery.countdown.min.js}"></script>
<script type="text/javascript" th:src="@{/js/woocommerce/price-slider.min.js}"></script>
<script type="text/javascript" th:src="@{/js/woocommerce/single-product.min.js}"></script>
<script type="text/javascript" th:src="@{/js/woocommerce/prettyPhoto/jquery.prettyPhoto.init.min.js}"></script>
<script type="text/javascript" th:src="@{/js/woocommerce/prettyPhoto/jquery.prettyPhoto.min.js}"></script>
<script  th:src="@{/js/noFue.js}"></script>
<script type="text/javascript" th:src="@{/js/wc-quantity-increment.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins.js}"></script>
<script type="text/javascript" th:src="@{/js/megamenu.min.js}"></script>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<script th:src="@{/js/layui.js}"></script>
<script type="text/javascript">
    var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $("#header .header-bottom").addClass("sticky-menu");
            $("#header .header-bottom").css({ "top":0, "left":0, "right" : 0 });
        } else {
            $("#header .header-bottom").removeClass("sticky-menu");
        }
    };
    sticky_navigation();
    $(window).scroll(function() {
        sticky_navigation();
    });

    function addToCart(id){
        $.ajax({
            url:'/add?count=1&pid='+id,
            type:'post',
            success:function (data) {
                alert("加入商品成功")
            },
            fail:function (data) {
                alert("fail")
            }
        })
    }

    // function comment(pid) {
    //     $.ajax({
    //         dataType:"json",
    //         type:"post",
    //         url:"/comment?pid="+pid,
    //         data:{
    //             star:$("#rating").val(),
    //             pid:$("#product_id").val(),
    //             content:$("#comment_content").val()
    //         },
    //         success:function (data) {
    //             var arr=data.comment
    //             var s="<div>";
    //              s +="用户名: "+arr.uid;
    //              s +="评论内容："+arr.content;
    //              s +="评论时间:"+arr.cdate;
    //              s+="</div>"
    //             $("#comments").append(s)
    //
    //         },
    //         fail:function () {
    //
    //         }
    //     })
    // }
    $(document).ready (function () {
        $( ".show-dropdown" ).each(function(){
            $(this).on("click", function(){
                $(this).toggleClass("show");
                var $element = $(this).parent().find( "> ul" );
                $element.toggle( 300 );
            });
        });
    });
</script>

</body>
</html>